<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
           <meta name="author" content="Zhang Cheng">
        <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
		<title></title>
		<script src="js/vue.js" ></script>
		<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
		<script type="text/javascript" src="js/vue-resource-1.3.4.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title">
						添加品牌
					</h3>
				</div>
				<div class="panel-body form-inline">
					<label >
						name:
						<input type="text" class="form-control" v-model="name"/>
					</label>
					<!--
                    	作者：offline
                    	时间：2019-08-24
                    	描述：绑定函数可以没有小括号，有小括号可以给函数传参数
                    -->
					 <input type="button" id="" value="添加"  class="btn btn-primary"@click="add"/>
					 
					 
					 <label >
						搜索名称关键字:
						<input type="text" class="form-control" v-model="keywords"/>
					</label>
				</div>
			</div>
			
			
			
			
			<table class="table table-bordered table-hover table-striped">
				<thead>
					<tr>
						<th>id</th>
						<th>name</th>
						<th>ctime</th>
						<th>opetration</th>
					</tr>
				</thead>
				
				
				<tbody >
					<tr v-for="(item,index) in search(keywords)":key="item.id">
						<td>{{index + 1}}</td>
						<td>{{item.name}}</td>
						<!--
                    		过滤器调用时候的格式 {{date | 过滤器的名称}}
                        -->
						<td>{{item.ctime | datepre}}</td>
						<td><a href="#" @click.prevent="del(item.id)" >删除</a></td>
					</tr>
				</tbody>
				
			</table>
			
			
			
		</div>
		<script>
			    //vue 当中定义全局过滤器，全局过滤器所有的Vue 实例 都可以公用
				//Vue.filter('过滤器的名称'，function(){ 要对传输过来的内容进行什么样的处理})  function 第一个参数是过滤器名称前面传输过来要验证的内容
				//Vue.filter('过滤器的名称'，function(date){ 要对传输过来的内容进行什么样的处理})
				//全局的过滤器只能定义在vue 的实例化之前
				//js 按顺序执行
				//es6 可以给形参默认值
				
				Vue.filter('datepre',function(date,pattern = ''){
					//根据给的时间给出特定的时间 
					var dt = new Date(date);
					
					
					//得到正确的时间
					
					var year = dt.getFullYear();
					var month = (dt.getMonth()).toString().padStart(2,'0');
					var day = (dt.getDate()).toString().padStart(2,'0');
					
					//return `${year}-${month}-${day}`//模板字符串
					
					
					if(pattern.toLowerCase()==='yyyy-mm-dd'){
						return `${year}-${month}-${day}`;
					}else{
						var hours = dt.getHours();
						var minutes = (dt.getMinutes()).toString().padStart(2,'0');
						var seconds = (dt.getSeconds()).toString().padStart(2,'0');
						return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
					}
				});
				
			// 配置服务器全局根路径
			//如果启用服务器全局根路径，在调用的过程中不能使用绝对路径，只能使用相对路径，即get 或者post中的url前面不能有斜杠
			Vue.http.options.root = 'http://127.0.0.1/sport/public/index.php/';
			//全局配置允许以表单方式获取
			Vue.http.options.emulateJSON = true;
			var app = new Vue({
				el:'#app',
				data:{
					id:'',
					name:'',
					keywords:'',
					list:[
						{ id : 1,name : "奔驰",ctime : new Date()},
						{ id : 2,name : "宝马",ctime : new Date()}
					
					]
				},
				created:function(){
					this.getAllList();
					//console.log(this.list)
				},
				
				methods:{
					search(keywords){
						return newlist = this.list.filter(item => {
							if(item.name.includes(keywords)){
								return item;
							}
						})
					},
					
					getAllList(){//获取所有车的列表
						//1.由于已经导入了所有的包，所以可以通过this.$http 获取所有的接口数据
						    let url="api/carlist";
			                //console.log(this.glist)
			               /* $.ajax({
								type:"get",
								url:url,
								data:{
									
								},
								dataType:"json",
								success: function(result){
									//var rasult = result.body;
									console.log(result.massage)
									if(result.status==0){
										this.list=result.massage;
									}else{
										alert('失败');
									}
								},
								error: function(){
									alert('获取失败')
								}
							});*/
						this.$http.get(url).then(result => {
							let res = result.body;
							//console.log(result);
							if(res.status === 0)
							{
								this.list=res.massage;
								this.name = '';
							}else{
								alert("失败");
							}
						})
					},
				
					add(){//添加品牌到后台服务器
						 let url="api/carlist/add/";
						 this.$http.post(url,{name:this.name}).then(result => {
						 	let res = result.body;
						 	if(res.status === 0){
						 		 this.getAllList()
						 	
						 	}else{
						 		alert("失败");
						 	}
						 	
						 })
					},
					del(id){
						let url ='api/carlist/del?id='
						 this.$http.get(url + id).then(result => {
							let res = result.body;
							console.log(result);
							if(res.status === 0)
							{
								this.getAllList();
							}else{
								alert("失败");
							}
						})
					},
				},
				
			});
			
		</script>
	</body>
</html>